<template>
	<view class="Buy">
		<u-toast ref="uToast"></u-toast>
		<u-modal :title="agreeList[agreeIndex].title" :show="agreeShow" @confirm="agreeShow = false;" confirmText="我已阅读">
			<view class="slot-content">
				<view class="modal_scroll">
					<u-parse :content="agreeList[agreeIndex].content"></u-parse>
				</view>
			</view>
		</u-modal>
		<u-navbar :auto-back="true" title="购买会员" :bg-color="bgColor" left-icon-color="#ffffff" :title-style="titleStyle"></u-navbar>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="detail" class="buy_box">
			<view class="buy_top">
				<image class="buy_bg" mode="widthFix" :src="mainBaseUrl + '/assets/xcx/buyvip/topbar.png'"></image>
			</view>
			<view class="taocan-box">
				<view class="buy-title">请选择购买套餐</view>
				<view class="taocan-list">
					<view class="taocan-item" v-if="prices[1]" :class="{active: type == 1}" @click="changeTaoCan(1)">
						<view class="xsth">限时特惠</view>
						<view class="text">黄金版</view>
						<view class="money">￥ {{ prices[1] }} 元</view>
					</view>
					<view class="taocan-item" v-if="prices[2]" :class="{active: type == 2}" @click="changeTaoCan(2)">
						<view class="xsth">限时特惠</view>
						<view class="text">{{ !prices[1] && type == 2 ? '升级' : ''}}豪华版</view>
						<view class="money">￥ {{ prices[2] }} 元</view>
					</view>
				</view>
				<view class="fuli">
					<view class="fl-item">
						<u-image src="/static/buyvip/mpry.png" width="131rpx" height="131rpx"></u-image>
						<view>免票入园</view>
					</view>
					<view class="fl-item">
						<u-image src="/static/buyvip/sxyn.png" width="131rpx" height="131rpx"></u-image>	
						<view>时效一年</view>
					</view>
					<view class="fl-item">
						<u-image src="/static/buyvip/zsjq.png" width="131rpx" height="131rpx"></u-image>
						<view>专属景区</view>
					</view>
					<view class="fl-item">
						<u-image src="/static/buyvip/zskf.png" width="131rpx" height="131rpx"></u-image>
						<view>专属客服</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="jingqu_title">
					<view class="type_main">热门景区</view>
					<view class="type_more" @click="$goUrl('/pages/list/list', 'to')">更多></view>
				</view>
				<view class="circuit_box jingqu_box">
					<view class="jingqu_item" v-for="(item, index) in jqList" :key="index" @click="$goUrl('/pages/listDetail/listDetail', 'to', {id: item.id})">
						<u-image :src="item.image" width="200rpx" height="200rpx" radius="10rpx"/>
						<view class="title">{{ item.title }}</view>
						<!-- <view class="price-box">
							<view class="jingqu_price">￥ {{ item.price }}</view>
							<u-image src="/static/price_tag.png" width="40px" height="16px" />
						</view>
						<view class="tags">{{ item.c_name }}</view> -->
					</view>
				</view>
			</view>
			<view class="flex_box buy_agree">
				<view @click="agreeStatus = !agreeStatus;" class="flex_box buy_agree_main">
					<view class="buy_agree_dot"></view>
					<u-checkbox-group>
						<u-checkbox size="24rpx" :checked="agreeStatus" activeColor="#0FBCF9" shape="circle"></u-checkbox>
					</u-checkbox-group>
					<view class="buy_agree_text">阅读并同意<text @tap.stop="showAgree(0)">《购买协议》</text></view>
				</view>
			</view>
			<view class="buyconfirm">
				<view class="price">
					<view class="price-peryear"><view>￥{{ prices[type] }}</view><view class="year">/年</view></view>
					<!-- <view class="line">￥1299</view> -->
				</view>
				<image class="image" src="/static/buyvip/buy.png">
				<view class="buy" @click="toBuy">立即购买</view>
			</view>
			<!-- <u-button throttleTime="1000" color="#45B9A2" shape="circle" :customStyle="btnStyle2" @click="toBuy" text="购买"></u-button> -->
			<!-- <view class="buy_code">{{detail.code}}</view> -->
			<!--
			<view v-if="detail.overtime==''" class="buy_main pay_main">
				<view class="flex_box flex_row_center user_box">
					<u-image width="104rpx" height="104rpx" radius="52rpx" :src="mainBaseUrl + '/assets/xcx/logo.png'"></u-image>
					<view class="user_content">
						<view class="user_name u-line-1">游客未登录</view>
						<view class="user_sub">暂未开通自由年卡，开通可享免门票入园</view>
					</view>
					<u-icon name="arrow-right" color="#1E272E"></u-icon>
				</view>
				<view class="member_box">
					<view class="member_content">
						<u-parse :content="detail.content"></u-parse>
					</view>
					<view class="member_main pay_box">
						<view class="flex_box buy_agree">
							<view @click="agreeStatus = !agreeStatus;" class="flex_box buy_agree_main">
								<view class="buy_agree_dot"></view>
								<u-checkbox-group>
									<u-checkbox size="24rpx" :checked="agreeStatus" activeColor="#0FBCF9" shape="circle"></u-checkbox>
								</u-checkbox-group>
								<view class="buy_agree_text">阅读并同意<text @tap.stop="showAgree(0)">《购买协议》</text></view>
							</view>
						</view>
						<view class="flex_box flex_row_between buy_btn">
							<!-- <u-button throttleTime="1000" @click="shareFriend" color="#FFD32A" shape="circle" :customStyle="btnStyle1" text="分享"></u-button> -->
							<!-- <u-button throttleTime="1000" open-type="share" color="#FFD32A" shape="circle" :customStyle="btnStyle1" text="分享"></u-button> -->
							<!-- <u-button throttleTime="1000" color="#45B9A2" shape="circle" :customStyle="btnStyle2" @click="toBuy" text="购买"></u-button> -->
			<!-- 			</view>
					</view>
				</view>
			</view>
			<view v-else class="buy_main">
				<view class="flex_box flex_row_center user_box">
					<u-image width="104rpx" height="104rpx" radius="52rpx" :src="detail.avatar"></u-image>
					<view class="user_content">
						<view class="user_name u-line-1">{{detail.nickname}}</view>
						<view class="user_sub">{{detail.starttime}} 至 {{detail.overtime}}</view>
					</view>
					<u-icon name="arrow-right" color="#1E272E"></u-icon>
				</view>
				<view class="member_box">
					<view class="member_main">
						<view class="flex_box flex_row_center member_title">
							<u-image width="126rpx" height="23rpx" src="/static/adorn2.png"></u-image>
							<view class="member_title_text">会员专属权益</view>
							<u-image width="126rpx" height="23rpx" src="/static/adorn1.png"></u-image>
						</view>
						<view class="flex_box flex_row_between member_content">
							<view class="member_option">
								<u-image width="100rpx" height="100rpx" radius="50rpx" src="/static/buy1.png"></u-image>
								<view>免票入园</view>
							</view>
							<view class="member_option">
								<u-image width="100rpx" height="100rpx" radius="50rpx" src="/static/buy2.png"></u-image>
								<view>一日一票</view>
							</view>
							<view class="member_option">
								<u-image width="100rpx" height="100rpx" radius="50rpx" src="/static/buy3.png"></u-image>
								<view>时效一年</view>
							</view>
							<view class="member_option">
								<u-image width="100rpx" height="100rpx" radius="50rpx" src="/static/buy4.png"></u-image>
								<view>精品景区</view>
							</view>
						</view>
						<view class="flex_box flex_row_center member_title">
							<u-image width="126rpx" height="23rpx" src="/static/adorn2.png"></u-image>
							<view class="member_title_text">补充说明</view>
							<u-image width="126rpx" height="23rpx" src="/static/adorn1.png"></u-image>
						</view>
						<view class="member_content">
							<u-parse :content="detail.supplement"></u-parse>
						</view>
					</view>
				</view>
				 -->
			</view>
		</view>
	</view>
</template>

<script>
	import { cardIndex, cardBuy, getSetInfo } from '@/common/http.api.js';
	let that;
	export default {
		data() {
			return {
				titleStyle: {color: '#ffffff'},
				bgColor: 'transparent',
				infoShow: false,
				pageLoading: true,
				detail: null,
				form: {
					pay_type: 2,
				},
				errorType: "toast",
				rules: {
					username: [{
							type: 'string',
							required: true,
							message: '请输入您的持卡人姓名',
							trigger: ['blur', 'change']
						},
					],
					bio: [{
							type: 'string',
							required: true,
							message: '请输入您的身份证号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							trigger: ['change','blur'],
						}
					],
				},
				btnStyle1: {
					width: '200rpx',
					height: '96rpx',
					color: '#1E272E',
					fontWeight: 'bold'
				},
				btnStyle2: {
					width: '372rpx',
					height: '96rpx',
					fontWeight: 'bold'
				},
				agreeStatus: false,
				agreeIndex: 0,
				agreeShow: false,
				agreeList: [
					{
						title: "购买协议",
						content: "购买协议内容"
					},
				],
				appName: '',
				jqList: [],
				type: 1,
				prices: [],
			}
		},
		onLoad() {
			that = this;
			that.appName = uni.getSystemInfoSync().appName
			// #ifdef APP-PLUS
			that.form.pay_type = 1
			// #endif
			that.cardIndex();
		},
		onPageScroll(e) {
			that.bgColor = e.scrollTop > 40 ? '#45B9A2' : 'transparent';
		},
		methods: {
			cardIndex() {
				cardIndex({})
					.then(res => {
						that.detail = res.data;
						that.pageLoading = false
						that.agreeList[0].content = res.data.agreement;
						that.jqList = res.data.list;
						that.prices = res.data.price;
						that.type = that.prices.length == 2 ? 1 : 2;
					})
					.catch(err => {
						uni.$u.toast(err.msg);
					});
			},
			changeTaoCan(e) {
				that.type = e;
			},
			async toBuy(){
				if(!that.agreeStatus){
					uni.$u.toast('请阅读并同意购买协议');
					return;
				}
				// #ifdef MP-WEIXIN
				let codeInfo = await uni.login()
				that.form.code = codeInfo.code
				// #endif
				that.form.type = that.type;
				cardBuy(that.form).then(res=>{
					// #ifdef APP-PLUS
					uni.requestPayment({
					    "provider": "wxpay", 
					    "orderInfo": {
					        "appid": res.data.appid,  
					        "noncestr": res.data.noncestr, // 随机字符串
					        "package": res.data.package,        // 固定值
					        "partnerid": res.data.partnerid ,      // 微信支付商户号
					        "prepayid": res.data.prepayid, // 统一下单订单号 
					        "timestamp": res.data.timestamp,        // 时间戳（单位：秒）
					        "sign": res.data.sign // 签名，这里用的 MD5/RSA 签名
					    },
					    success() {
							console.log(res)
							that.$refs.uToast.show({
								type: "success",
								message: "购买成功",
								complete(){
									uni.navigateBack();
								}
							});
						},
					    fail(e) {
							console.log(e)
							that.$refs.uToast.show({
								type: "error",
								message: "购买失败",
								complete(){
								}
							});
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.requestPayment({
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						timeStamp: res.data.timeStamp + '',
						success(result) {
							that.$refs.uToast.show({
								type: "success",
								message: "购买成功",
								complete(){
									uni.navigateBack();
								}
							});
						},
						fail(result) {
							that.$refs.uToast.show({
								type: "error",
								message: "购买失败",
								complete(){
								}
							});
						},
					})
					// #endif
				}).catch(err=>{
					uni.$u.toast(err.msg);
				});
			},
			// 查看协议
			showAgree(e){
				that.agreeIndex = e,that.agreeShow = true;
			},
			shareFriend(){
				uni.share({
				    provider: 'weixin',
				    scene: "WXSceneSession",
				    type: 5,
				    imageUrl: that.shareInfo.image,
				    title: that.shareInfo.title,
				    miniProgram: {
				        id: that.appId,
				        path: `/pages/home/index/index?invitation=${that.userInfo.invitation}`,
				        type: 0,
				        webUrl: that.baseUrl
				    },
				    success: ret => {
				        that.$refs.uToast.show({
				        	type: 'success',
				        	title: '分享成功'
				        });
				    }
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Buy {
		min-height: 100vh;
		background-color: #ffffff;
		.buy_box {
			position: relative;
			padding-bottom: 60rpx;
			.buy_top{
				position: relative;
				z-index: 100;
				.buy_bg{
					width: 100%;
				}
				.buy_app{
					position: absolute;
					left: 110rpx;
					top: 250rpx;
					font-size: 32rpx;
					line-height: 48rpx;
					font-weight: bold;
					z-index: 2;
					color: #F2A24D;
				}
			}
			.taocan-box {
				box-shadow: 0px 0px 2px 0px #A6A6A6;
				border-radius: 24px 24px 0px 0px;
				padding: 0 20rpx;
				.buy-title {
					color: #666;
					padding-top: 44rpx;
					margin-bottom: 40rpx;
				}
				.taocan-list {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					.active {
						background: #FAF7ED!important;
						border: 1px solid #EFC082;
					}
					.taocan-item {
						width: 330rpx;
						height: 240rpx;
						border-radius: 24rpx;
						background: #F5F5F5;
						display: flex;
						flex-direction: column;
					    align-items: center;
						justify-content: center;
						position: relative;
						.xsth {
							background: url("/static/buyvip/xsth-tag.png");
							width: 170rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							color: #9F7337;
							position: absolute;
							top: -13px;
							right: -1px;
							border-top-right-radius: 30rpx;
							border-bottom-left-radius: 30rpx;
						}
						.text {
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 32rpx;
							color: #D4A93F;
						}
						.money {
							font-family: Source Han Sans CN;
							font-weight: bold;
							font-size: 36rpx;
							color: #2F292D;
						}
					}
				}
				.fuli {
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					.fl-item {
						display: flex;
						flex-direction: column;
						align-items: center;
					}
				}
				.line {
					width: 100%;
					height: 8rpx;
					background: #F5F5F5;
				}
				.jingqu_title {
					display: flex;
					margin: 37rpx 0 15px;
					justify-content: space-between;
					.type_main {
						font-size: 30rpx;
						font-weight: bold;
					}
					.type_more {
						color:grey;
					}
				}
				.jingqu_box {
					display: flex;
					justify-content: space-between;
					.jingqu_item {
						width:200rpx;
						.title {
						  margin:10px 0 14px;
						  display: -webkit-box;
						  overflow: hidden;
						  text-overflow: ellipsis;
						  word-wrap: break-word;
						  white-space: normal !important;
						  -webkit-line-clamp: 2;
						  -webkit-box-orient: vertical;
						}
						.price-box {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.jingqu_price {
								color: #FF413D;
								font-size: 20rpx;
							}
						}
						.flex_box {
							height: 11px;
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #999999;
							line-height: 17px;
							-webkit-text-decoration-line: line-through;
							text-decoration-line: line-through;
							justify-content: space-between;
							display: flex;
							margin-top: 12px;
						}
						.tags {
							color:#FF871D;
						}
					}
				}
			}
			.buy_code{
				position: absolute;
				top: 300rpx;
				left: 0;
				width: 100%;
				height: 88rpx;
				font-size: 60rpx;
				color: #ffffff;
				line-height: 88rpx;
				font-weight: bold;
				text-align: center;
			}
			.buy_main{
				padding: 0 0 60rpx;
				.user_box{
					height: 188rpx;
					.user_content{
						width: 482rpx;
						padding: 0 38rpx 0 12rpx;
						.user_name{
							font-size: 32rpx;
							color: #1E272E;
							font-weight: bold;
							height: 48rpx;
							line-height: 48rpx;
							margin-bottom: 12rpx;
						}
						.user_sub{
							font-size: 24rpx;
							color: #808E9B;
							height: 36rpx;
							line-height: 36rpx;
						}
					}
				}
				.member_box{
					.member_main{
						padding: 0 72rpx;
						.member_title{
							height: 154rpx;
							.member_title_text{
								font-size: 40rpx;
								color: #1E272E;
								line-height: 154rpx;
								text-align: center;
								font-weight: bold;
								padding: 0 30rpx;
							}
						}
						.member_content{
						}
					}
					.pay_box{
						position: fixed;
						bottom: 0;
						left: 0;
						width: 100%;
						z-index: 10;
						padding: 0 72rpx 30rpx;
						background-color: #ffffff;
					}
				}
			}
			.pay_main{
				padding: 0 0 220rpx;
			}
			.buy_agree{
				padding: 30rpx 0 30rpx 36rpx;
				.buy_agree_main{
					position: relative;
					.buy_agree_dot{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						width: 40rpx;
						height: 40rpx;
					}
					.buy_agree_text{
						font-size: 26rpx;
						text{
							color: #0FBCF9;
						}
					}
				}
			}
		    .buyconfirm{
			   display: flex;
			   justify-content: space-between;
			   background: #FEECBC;
			   border-radius: 40px;
			   align-items: center;
			   padding: 0 40rpx;
			   width: 700rpx;
			   margin: 0 auto;
			   position: relative;
			   .price {
				   display: flex;
				   justify-content: space-between;
				   padding: 25rpx 0;
				   align-items: baseline;
				   .price-peryear {
					   display: flex;
					   height: 35px;
					   font-family: Source Han Sans CN;
					   font-weight: bold;
					   font-size: 28px;
					   color: #2F292D;
					   align-items: baseline;
					   .year {
						   font-family: Source Han Sans CN;
						   color: #595959;
						   font-size: 28rpx;
					   }
				   }
				   .line {
				      text-decoration-line: line-through;
					  color: #595959;
				   }
			   }
			   .image {
				   position: absolute;
				   height: 106rpx;
				   width: 280rpx;
				   right: 0;
			   }
			   .buy {
				   height: 57px;
				   font-family: Source Han Sans CN;
				   font-weight: 400;
				   font-size: 28rpx;
				   color: #FEECBC;
				   width: 200rpx;
				   line-height: 57px;
				   z-index: 200;
				   padding-left: 52rpx;
			   }
		   }
		}
		.buy_form ::v-deep {
			.u-form-item__body__left__content__label{
				font-weight: 500;
				color: #1E272E;
				font-size: 32rpx;
				padding: 20rpx 0;
			}
			.input-placeholder{
				font-weight: 500;
				color: #808E9B;
				font-size: 32rpx;
			}
			.u-line{
				border-bottom: 2rpx solid #1E272E !important;
			}
		}
		.modal_scroll{
			max-height: 720rpx;
			overflow-y: scroll;
		}
	}
</style>
